<template>
  <div class="maincm">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="mainor_form" style="min-height: 30px">
          <div class="mainor_te box">
            <el-button
              class="mainor_tea"
              style="margin-left: 10px"
              @click="handleSynchron"
              >同步分类</el-button
            >
          </div>
        </div>
        <div class="main_tree">
          <h3 class="main_tree_h boxdq">
            <span>分类名称</span>
          </h3>
          <div class="main_tree_b">
            <el-tree
              :data="list"
              :check-strictly="true"
              show-checkbox
              node-key="id"
              ref="tree"
              v-loading="listLoading"
              element-loading-text="加载中"
              icon-class="el-icon-arrow-right"
              :default-checked-keys="defaultkeys"
              :default-expanded-keys="defaultexpandedkeys"
              highlight-current
              :props="defaultProps"
              style="min-height: 530px"
              @check-change="handleCheckChange"
              @check="checkChange"
            >
            </el-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { tplus_getCategory, tplus_synchroCategory } from "@/api/tplus/index";

import rules from "@/rules/commodity/commodityClassification";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  components: {},
  data() {
    return {
      // 树型tree
      defaultkeys: [],
      defaultexpandedkeys: [-1],
      defaultProps: {
        children: "selfNext",
        label: "title",
      },
      // 增加和编辑
      info: {
        title: "",
        pid: 0,
      },
      id: "",
      type: 0,
      addedFormVisible: false,
      // 验证
      rules,
      // 列表数据
      list: [],
      listLoading: false,
      // 监听滚动
      searchBarFixed: false,
      isEdit: false,
    };
  },
  mounted() {},
  destroyed() {},
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      this.isEdit = true;
    },
    // 同步分类
    handleSynchron() {
      let arry = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());
      if (arry.length == 0) {
        this.$message.warning("请勾选需要同步的分类");
        return;
      } else {
        if (arry.indexOf(-1) != -1) {
          arry.splice(arry.indexOf(-1), 1);
        }
        this.tplus_synchroCategory(JSON.stringify(arry));
      }
    },
    tplus_synchroCategory(ids) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.current)) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { ids: ids }
      );
      tplus_synchroCategory(data).then((res) => {
        if (res.errcode == 0) {
          this.tplus_getCategory();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 列表
    tplus_getCategory() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      tplus_getCategory(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          let arry = [];
          res.data.category.forEach((e) => {
            if (e.is_synchro) {
              e.disabled = true;

              if (e.selfNext.length != 0) {
                this.selfNext(e.selfNext, arry);
              }
            }
          });
          this.defaultkeys = arry;
          this.list = [
            {
              id: -1,
              isSelect: true,
              title: "所有菜单",
              selfNext: res.data.category,
            },
          ];
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    selfNext(self, arry) {
      self.map((e) => {
        if (e.is_synchro) {
          e.disabled = true;
          if (e.selfNext.length != 0) {
            this.selfNext(e.selfNext, arry);
          }
        }
      });
    },
    /* 
    节点选择的change事件
    父节点选中，子节点全部选中,
    子节点可以一个个取消，父节点依然选中 
    */

    checkChange(data) {
      const node = this.$refs.tree.getNode(data.id);
      this.setNode(node);
    },
    setNode(node) {
      if (node.checked) {
        this.setParentNode(node);
        this.setChildNodeSelected(node);
      } else {
        this.setChildNode(node);
      }
    },
    // 向上递归，选中子级，父级逐级选中
    setParentNode(node) {
      if (node.parent) {
        for (const key in node) {
          if (key === "parent" && !node[key].disabled) {
            node[key].checked = true;
            this.setParentNode(node[key]);
          }
        }
      }
    },
    // 向下递归，选中父级，子级全部选中
    setChildNodeSelected(node) {
      if (node.childNodes.length > 0) {
        node.childNodes.map((e) => {
          if (!e.disabled) {
            e.checked = true;
            this.setChildNodeSelected(e);
          }
        });
      }
    },
    //递归设置子节点全部取消选中
    setChildNode(node) {
      if (node.childNodes && node.childNodes.length) {
        node.childNodes.forEach((item) => {
          if (!item.disabled) {
            item.checked = false;
            this.setChildNode(item);
          }
        });
      }
    },
  },
  created() {
    // 列表
    this.tplus_getCategory();
  },
};
</script>
<style lang="scss" scoped>
.maincm {
  .main_tree {
    .main_tree_h {
      span {
        &:last-child {
          margin-right: 40px;
        }
      }
    }
  }
  .newConBox.on {
    margin-left: -10px;
    padding-left: 10px;
  }
}
</style>
